<!doctype html>
<html lang="en" class="no-ie" style="overflow:hidden;">

<head>
	<title>多开游戏</title>
	<meta http-equiv="Content-type" content="text/html" />

	<meta charset="UTF-8" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body,
		html {

			height: 100%;
		}

		.box {
			float: left;
			width: 50%;
			height: 50%;
		}

		.borderbox {
			width: 99.5%;
			height: 99.5%;
			border: 1;
			border-style: inset;
		}

		ul {
			list-style: none;
		}

		a {
			text-decoration: none;
			color: #333;
		}

		.giframe {
			border: 0;
			position: absolute;
			z-index: 99;
		}

		.contextmenu {
			width: 200px;
			border: 1px solid #999;
			box-shadow: 3px 3px 3px #ccc;
			background-color: #fff;
			position: absolute;
			top: 10px;
			left: 10px;
			display: none;
			z-index: 9999999
		}

		.contextmenu li {
			height: 40px;
			line-height: 40px;
		}

		.contextmenu li a {
			display: block;
			padding: 0 30px;
		}

		.contextmenu li a:hover {
			background-color: #ccc;
			font-weight: bold;
			color: #fff;
		}

		.black_overlay {
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.8;
			opacity: .80;
			filter: alpha(opacity=88);
		}

		.white_content {
			display: none;
			position: absolute;
			top: 10%;
			left: 15%;
			width: 70%;
			height: 80%;
			border: 10px solid orange;
			background-color: white;
			z-index: 1002;
			overflow: auto;
		}

		/*弹出层*/
		.popBox {
			background-color: #FFFFFF;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.popclose {
			position: absolute;
			text-align: center;
			right: 0px;
			background-color: #20b6ca;
			height: 30px;
			width: 60px;
			top: 0px;
		}


		.popcontent {
			position: absolute;
			top: 30px;
			bottom: 10px;
			left: 2px;
			right: 10px;
		}

		.protocolDebugDiv {
			height: 100%;
			background-color: #EEEEEE;
			float: right;
			position: absolute;
			left: 70%;
			right: 0px;
			z-index: 99999;
		}

		.chooseDiv {
			height: 70px;
			line-height: 70px;
			background-color: #EEEEEE;
		}

		.debugDiv {
			height: 90%;
			top: 60px;
			left: 10px;
			right: 0px;
			overflow-y: scroll;
			position: absolute;
		}

		.cacheButton {
			height: 30px;
			width: 100%;
		}
	</style>
	<script>
		// var pos = {"t1":[0,0],"t2":[1,0],"t3":[0,1],"t4":[1,1]}
		function frameLoad(id) {
			var frame = document.getElementById(id);
			var win = frame.contentWindow;
			// Custom console
			win.originalConsole = win.console;
			win.console = {
				log: function (...args) {
					parent.console.log(`[${id}]`, ...args);
				},
				warn: function (...args) {
					parent.console.warn(`[${id}]`, ...args);
				},
				error: function (...args) {
					parent.console.error(`[${id}]`, ...args);
				},
				info: function (...args) {
					parent.console.info(`[${id}]`, ...args);
				},
				time: function (...args) {
					parent.console.time(`[${id}]`, ...args);
				},
				timeEnd: function (...args) {
					parent.console.timeEnd(`[${id}]`, ...args);
				},
				debug: function (...args) {
					parent.console.debug(`[${id}]`, ...args);
				}
			};

			var toolbar = win.document.getElementsByClassName('toolbar')[0];
			if (toolbar)
				toolbar.style.display = 'none';
			win.oncontextmenu = showMenu;
			win.frameid = id;
			win.WebDebug = {};
			win.CC_EDITOR = false;
			document.title = frame.contentDocument.title

			var vconsole = frame.contentDocument.getElementById("__vconsole");
			if (vconsole) {
				var display = localStorage.getItem(id + "vconsole");
				if (display) {
					vconsole.style.display = display;
				}
			}

			// Add click event listener for the iframe's document to close the menu
			win.document.addEventListener('click', function () {
				closeMenu();
			});
		}

		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return unescape(r[2]);
			return null;
		}
		var allframe = [];

		function init() {
			var query = window.location.search.substring(1);
			var vars = query.split("&");
			var urls = "";
			var url;
			var account;
			for (var i = 0; i < vars.length; i++) {
				var pair = vars[i].split("=");
				if (pair[0] == "furl") {
					url = pair[1];
				} else if (pair[0] == "account") {
					account = pair[1];
				} else {
					urls += vars[i] + "&";
				}
			}

			var url = getQueryString("furl")
			if (!url)
				url = "../../../web-mobile/web-mobile/index.html?"
			else url = url + "?"
			if (urls.length > 0) {
				url += urls.toString("&");
			}
			if (account) {
				var allaccount = account.split(",")
				for (var i = 1; i < 9; i++) {
					var frame = document.getElementById('t' + i);
					if (frame) {
						if (allaccount[i - 1]) {
							frame.src = url + "account=" + allaccount[i - 1] + "&t=" + new Date().getTime();;
							frame.style.display = "block"
							allframe.push(frame);
						} else {
							// frame.src = url;
							frame.style.display = "none"
						}
					}
				}
			} else {
				for (var i = 1; i < 9; i++) {
					var frame = document.getElementById('t' + i);
					if (frame) {
						if (i == 1) {
							frame.src = url + "t=" + new Date().getTime();
							frame.style.display = "block"
							allframe.push(frame);
						} else {
							// frame.src = url;
							frame.style.display = "none"
						}
					}
				}
			}

			fresize();
		}

		function fresize() {
			console.log('----------------- fresize window.innerWidth ' + window.innerWidth + ' window.innerHeight ' + window.innerHeight);
			var len = allframe.length;
			if (len > 1) {
				var fwidth = window.innerWidth / (Math.ceil(len / 2)) - 1;
				var fheight = window.innerHeight / 2 - 1;
			} else {
				fwidth = window.innerWidth;
				fheight = window.innerHeight;
			}


			for (var i = 0; i < len; i++) {
				var frame = allframe[i];
				frame.style.left = Math.floor(i / 2) * (fwidth + 1) + "px";
				frame.style.top = (i % 2) * (fheight + 1) + "px";
				frame.width = fwidth;
				frame.height = fheight;

				console.log('----------------- fresize ' + frame.width + ' ' + frame.height + ' ' + frame.style.left);
			}
		}
		var selectFrame;

		function showMenu(env) {
			env.preventDefault();
			//env 表示event事件
			// 兼容event事件写法
			var e = env || window.event;

			// 获取菜单，让菜单显示出来
			var context = document.getElementById("context");
			context.style.display = "block";
			var frameid = env.currentTarget.frameid
			if (frameid) {
				//  var pxy =  pos[frameid];
				selectFrame = document.getElementById(frameid);
				//  让菜单随着鼠标的移动而移动
				//  获取鼠标的坐标
				// var w = env.currentTarget.parent.innerWidth;
				// var h = env.currentTarget.parent.innerHeight;
				// var x =  e.clientX+pxy[0]*w*0.5;
				// var y =  e.clientY+pxy[1]*h*0.5;

				var fpos = selectFrame.getBoundingClientRect()
				var x = e.clientX + fpos.left
				var y = e.clientY + fpos.top


				//  调整宽度和高度
				context.style.left = (x + 10) + "px";
				context.style.top = y + "px" //Math.min(h-230,y)+"px";
			}
			return false;
		};
		// 当鼠标点击后关闭右键菜单
		document.onclick = function () {
			closeMenu()

		};

		function closeMenu() {
			var contextmenu = document.getElementById("context");
			contextmenu.style.display = "none";
		}

		function refFrame() {
			if (selectFrame) {
				if (selectFrame.oldsrc)
					selectFrame.src = selectFrame.oldsrc
				else selectFrame.src = selectFrame.src;
			}
		}

		function closeFrame() {
			if (selectFrame) {
				selectFrame.oldsrc = selectFrame.src;
				selectFrame.src = "";
			}
		}

		function getItem(key) {
			if (selectFrame && selectFrame.contentWindow.WebDebug.g_data)
				return selectFrame.contentWindow.WebDebug.g_data[key];
		}

		function closeurl() {
			document.getElementById('pop').src = "";
			document.getElementById('light').style.display = 'none';
			document.getElementById('fade').style.display = 'none';
		}

		function popLoad() {
			//     var frame = document.getElementById('pop');
			//    var frameDocument= frame.contentDocument;
			//    var closediv = frameDocument.getElementById('gobackR');
			//    if(closediv){
			//         close.onclick = function(){
			//             closeurl();
			//         }
			//    }
		}

		var onResize = false
		function onResizeDown() {
			onResize = true

			var resize = document.getElementById('resize')
			resize.style.left = '0px'
			resize.style.width = "100%"
		}

		function onResizeMove(event) {
			if (onResize) {
				event = event || window.event
				const width = document.body.clientWidth
			}
		}

		function onResizeUp(event) {
			if (onResize) {
				onResize = false

				event = event || window.event

				var resize = document.getElementById('resize')
				resize.style.width = '10px'
				resize.style.left = event.x - 10 + 'px'
			}
		}
	</script>
</head>


<body onload="init()" onresize="fresize()">

	<iframe onload="frameLoad('t1')" id="t1" name="n1" class="giframe" scrolling="no"></iframe>

	<iframe onload="frameLoad('t2')" id="t2" name="n2" class="giframe" scrolling="no"></iframe>

	<iframe onload="frameLoad('t3')" id="t3" name="n3" class="giframe" scrolling="no"></iframe>

	<iframe onload="frameLoad('t4')" id="t4" name="n4" class="giframe" scrolling="no"></iframe>

	<iframe onload="frameLoad('t5')" id="t5" name="n5" class="giframe" scrolling="no"></iframe>

	<iframe onload="frameLoad('t6')" id="t6" name="n6" class="giframe" scrolling="no"></iframe>

	<iframe onload="frameLoad('t7')" id="t7" name="n7" class="giframe" scrolling="no"></iframe>

	<iframe onload="frameLoad('t8')" id="t8" name="n8" class="giframe" scrolling="no"></iframe>

	<div class="contextmenu" id="context">
		<ul>
			<li><a href="javascript:refFrame();">刷新</a></li>
			<li><a href="javascript:closeFrame();">关闭</a> </li>
		</ul>
	</div>
	<div id="light" class="white_content">
		<div class="popBox">
			<div id="popurl"></div>
			<div class="popclose">
				<a href="javascript:void(0)" onclick="closeurl()">关闭</a>
			</div>
			<div class="popcontent">
				<iframe id="pop" name="pop" onload="popLoad()" scrolling="no"
					style="width: 100%; height: 100%;"></iframe>
			</div>
		</div>
	</div>
	<div id="fade" class="black_overlay" onclick="closeurl()">
	</div>

	<div id="resize"
		style="cursor: e-resize; height: 100%;width:10px; position: absolute; left: 70%; z-index: 999999;display: none;"
		onmousedown="onResizeDown()" onmouseup="onResizeUp(event)" onmousemove="onResizeMove(event)"></div>
</body>



</html>